<template>
  <div>
    <!-- <div class="wrap clearfix">
      <div class="c c1"></div>
      <div class="c c2 clearfix">
        <div class="d"></div>
        <div class="d"></div>
      </div>
    </div>
    <div>sldkjfsdjflsfj</div>
    <span class="yy">slslfjasf</span>
    <span class="yy">slslfjasf</span>
    <span class="yy">slslfjasf</span>saldjfskfjls -->

    <!-- <div class="float">
      123
    </div>
    <div class="mask"></div> -->
    <!-- <div class="main-list">
      <div class="items hastip">
        <a href="#">
          <div class="tip">新品</div>
          <img width="150" height="150" src="https://i1.mifile.cn/a1/pms_1521026661.04345181!220x220.jpg" alt="">
          <strong>8H记忆绵护椎腰靠</strong>
          <span>85元</span>
          <i>698人</i>
        </a>
      </div>
      <div class="items hastip">
        <a href="#">
          <img width="150" height="150" src="https://i1.mifile.cn/a1/pms_1521026661.04345181!220x220.jpg" alt="">
          <strong>8H记忆绵护椎腰靠</strong>
          <span>85元</span>
          <i>698人</i>
        </a>
      </div>
    </div> -->
    <ul>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>

      <li class="small-ss">
        <a href="#"></a>
        <a href="#"></a>
      </li>
    </ul>
    <div class="list">
      <div class="hts">
        <h2>标题XXX</h2>
        <div class="rt">
          <a href="#">更多</a>
        </div>
      </div>
      <div class="content">
        <img src="https://i1.mifile.cn/a4/xmad_15266395374048_JnZQo.jpg" alt="">
      </div>
    </div>

  </div>
</template>

<style lang="stylus">
.list
  width 400px
  height 500px
  // border 1px solid #ddd
  background #fff
  .hts
    border-bottom 1px solid #ddd
    padding 15px
    position relative
    .rt
      position absolute
      right 20px
      top 33px
.items
  float left
  background #fff
  width 234px
  height 310px
  text-align center
  margin 20px
  a
    display block
    padding 34px 0 20px
    position relative
  img
    display block
    margin 0 auto
  strong
    color #333
    font-size 14px
    display block
  span
    display block
    color red
    font-size 14px
  i
    color #999
    font-size 12px
    font-style normal
  .tip
    display none
  &.hastip .tip
    position absolute
    top 0
    left 50%
    display block
    width 64px
    height 20px
    line-height 20px
    margin-left -32px
    background #83c44e
    color #fff
    font-size 12px
    text-align center
html, body
  background #eee
  font-size 20px
.mask
  position fixed
  top 0
  right 0
  left 0
  bottom 0
  background #000
  opacity 0.5
.float
  width 100px
  height 120px
  background #ff6700
  color #fff
  position fixed
  right 10px
  top 50%
  margin-top -60px
  z-index 1000
body
  padding 100px
// span, strong, i
// border 1px solid #ddd
// // display block
// div, h2, ul
// display inline
.wrap
  width 900px
  // background #000
  border 1px solid #000
div.c, div.b
  width 200px
  height 100px
  margin 0 10px 10px 0
div.c1
  float left
  background #ff6700
div.c2
  width 600px
  float left
  background #eee
  padding 15px
.d
  width 200px
  height 50px
  margin-right 10px
  background #3ff
  margin-bottom 10px
  float left
.yy
  border 1px solid #ddd
  padding 10px 20px
  margin 20px
  display inline-block
</style>
